<template>
  <div class="button-container">
    <!-- <el-icon v-if="icon"><icon /></el-icon> -->
    <div :class="`button-title ${btnTypeObj[type]}`">{{ title }}</div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
defineProps({
  //按钮标题
  title: {
    type: String,
    default: "",
  },
  //按钮图标
  icon: {
    type: String,
    default: "",
  },
  //按钮类型 primary|danger
  type:{
    type:String,
    default:'primary'
  }
});

const btnTypeObj = ref({
    primary:'button-title-primary',
    danger:'button-title-danger'
})

</script>
<style scoped lang="scss">
.button-container {
  cursor: pointer;
  height: 19px;
  display: inline-flex;

  .button-title {
    font-size: 14px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    font-weight: normal;
    line-height: 14px;
    padding-right: 10px;
  }
  .button-title-primary {
   color: #00B9FF;
  }

  .button-title-danger {
   color: #FE545B;
  }
}

</style>
